<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        select, #num1,#num2 {
            width: 150px;
        }
        span {
            color: red;
        }
        #res {
            font-size: 15px;
            color: red;
            margin: 0 auto;
        }

        #cal,
        #reset {
            width: 100px;
            height: 30px;
            background-color: blue;
            color: white;
        }
    </style>
</head>

<body>
    <div class="box">
        <form action="">
            <h2>简单四则运算计算器</h2>
            <p><input type="text" name="" id="num1" placeholder="数字1"><span id="spId1"></span></p>
            <p><input type="text" name="" id="num2" placeholder="数字2"><span id="spId2"></span></p>
            <select name="" id="ope">
                <option value="1">加法</option>
                <option value="2">减法</option>
                <option value="3">乘法</option>
                <option value="4">除法</option>
            </select>
            <div class="box2">
                <p><input type="button" name="" id="cal" value="计算" onclick="fun()">
                    <input type="reset" name="" id="reset" value="重置">
                </p>
                <p id="res"></p>
            </div>
    </div>
    </form>
</body>
<script>
    function fun() {
        let number1 = document.getElementById("num1").value;
        if (number1.trim() === '') {
            // alert("数字1不允许为空!");
            document.getElementById("spId1").textContent = "数字1不允许为空!";
            return;
        }
        let number2 = document.getElementById("num2").value;
        if (number2.trim() === '') {
            // alert("数字2不允许为空!");
            document.getElementById("spId2").textContent = "数字2不允许为空!";
            return;
        }
        let operation = document.getElementById("ope").value;
        let result = 0;
        number1 = parseFloat(number1);
        number2 = parseFloat(number2);
        switch (parseInt(operation)) {
            case 1:
                result = number1 + number2;
                document.getElementById("res").innerText = (`${number1}+${number2} = ${result}`);
                break;
            case 2:
                result = number1 - number2;
                document.getElementById("res").innerText = (`${number1}-${number2} = ${result}`);
                break;
            case 3:
                result = number1 * number2;
                document.getElementById("res").innerText = (`${number1}*${number2} = ${result}`);
                break;
            case 4:
                if (number2 == 0) {
                    alert("数字2不允许为0!");
                    return;
                }
                result = number1 / number2;
                document.getElementById("res").innerText = (`${number1}/${number2} = ${result}`);
                break;
        }
    }
</script>

</html>